<template>
	<div class="page">
		<div class="w750">
			<div class="s_box">
				<div class="s_head">
					<img src="../../assets/images/faucet_b.jpg">
					<i class="iconfont iconback"></i>
				</div>
				<div class="s_body">
					<div class="s_power icon" :class="{active:openSource === true}" @click="openFaucet">
						<div class="s_state" v-if="openSource">已开启</div>
						<div class="s_state" v-else>未开启</div>
						<i class="iconfont iconoff"></i>
					</div>
					<div class="s_msg">
						<div class="cell cell2">
							<div class="num"><span>{{lazyVal}}</span>s</div>
							<div class="name">延时出水</div>
						</div>
						<div class="cell cell2">
							<div class="num">
	 							<van-count-down ref="countDown" :time="countTime" :auto-start="false" @finish="finished"/>
							</div>
							<div class="name">倒计时</div>
						</div>
					</div>
					<div class="s_opt">
						<div class="s_type2">
							<div class="name">延迟时间</div>
							<div class="state"><span id="lightVal">{{lazyVal}}</span>s</div>
							<div class="slider_box">
								<van-slider v-model="lazyVal" :value="lazyVal" :step="10" :min="0" :max="600" @change="onChangeTime" />
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
    </div>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
	    name: 'shower',
	    data() {
	        return {
				lazyVal: 0,
				countTime:0, //倒计时
				openSource:false, //电源是否打开
	        }
	    },
		computed:{
		    ...mapState([
		        'lazyTime', //延迟时间
		    ])
		},
		mounted() {
			this.lazyVal = this.lazyTime;
			this.countTime = this.lazyTime * 1000;
            if(typeof(hilink) != "undefined"){
                hilink.config(
                    "com.yoguo.myappname",
                    "",
                    "['setDeviceInfo']",
                    "0",
                )
            };
		},
	    methods:{
	    	onChangeTime(value) {
		      	this.lazyVal = value;
		      	this.countTime = value * 1000;
                if(this.openSource){
                    this.sendData("1");
                }else{
                    this.sendData("0");
                }
		    },
		    openFaucet(){
		    	this.openSource = !this.openSource;
                if(this.openSource){
                    this.sendData("1");
                    this.$refs.countDown.reset();
                    this.$refs.countDown.start();
                }else{
                    this.sendData("0");
                    this.$refs.countDown.pause();
                }
		    },
		    finished() {
		    	console.log('倒计时结束');
		    },
            sendData(value){
                if(typeof(hilink) != "undefined"){
                    let json_body = {
                        "sid1":{
							"on": value,
							"SetWater": this.lazyVal
                        }
                    }
                    hilink.setDeviceInfo(
						"0",
						json_body,  //见下描述
						"resultCallback" 
                    )
                }
            }
	    }
	}
</script>

<style scoped>
	.s_body{width:6.9rem;margin:-0.5rem auto 0;padding-bottom:0.3rem;}
	.s_power{height:1rem;color:#fff;position:relative;padding:0 0.16rem 0 0.36rem;cursor:pointer;background-position:0 0;box-shadow:0 3px 6px rgba(0,0,0,0.1);border-radius:1rem;}
	.s_power.active{background-position:0 -1.1rem;box-shadow:0 3px 6px rgba(20,182,252,0.4);}
	.s_power .s_state{font-size:0.28rem;line-height:1rem;}
	.s_power .s_name{font-size:0.28rem;line-height:0.48rem;}
	.s_power .iconoff{font-size:0.6rem;position:absolute;right:0;top:0;height:1rem;width:1rem;line-height:1rem;text-align:center;}

	.s_msg{background:#fff;border-radius:0.12rem;height:1.4rem;margin-top:0.25rem;display:-webkit-box;display:-webkit-flex;display: flex;}
	.s_msg .cell{padding:0.22rem 0.1rem 0 0.32rem;position:relative;}
	.s_msg .cell2{width:50%;}
	.s_msg .cell3{width:33.333%;}
	.s_msg .cell .num{font-size:0.28rem;color:#ff6528;line-height:0.54rem;}
	.s_msg .cell .num span{font-size:0.36rem;padding-right:0.04rem;font-weight:bold;}
	.s_msg .cell .num .van-count-down{color:#ff6528;font-weight:bold;font-size:0.36rem;line-height:0.54rem;}
	.s_msg .cell .name{line-height:0.4rem;color:#000}
	.s_msg .cell:before{content:"";width:1px;height:0.6rem;background:#ddd;position:absolute;top:0.4rem;right:0;}
	.s_msg .cell:last-child:before{display:none;}

	.s_opt{overflow:hidden;}
	.s_type1{background:#fff;height:1.4rem;margin-top:0.25rem;border-radius:0.12rem;display:-webkit-box;display:-webkit-flex;display: flex;}
	.s_type1 .item{position:relative;width:50%;padding:0.22rem 0.1rem 0 0.32rem;color:#000;cursor:pointer;}
	.s_type1 .item:first-child:before{content:"";width:1px;height:0.6rem;background:#ddd;position:absolute;top:0.4rem;right:0;}
	.s_type1 .item .name{font-size:0.36rem;line-height:0.48rem;font-weight:bold;}
	.s_type1 .item .state{font-size:0.28rem;line-height:0.54rem;color:#ccc;}
	.s_type1 .item i{position:absolute;top:0.18rem;right:0.16rem;font-size:0.48rem;width:1rem;height:1rem;line-height:1rem;text-align:center;color:#ccc;}
	.s_type1 .item.active{color:#137bfc;}
	.s_type1 .item.active .state{color:#137bfc;}
	.s_type1 .item.active i{color:#137bfc}
	
	.s_type2{background:#fff;height:1.4rem;margin-top:0.25rem;border-radius:0.12rem;color:#000;padding:0.22rem 0.1rem 0 0.32rem;position:relative;}
	.s_type2 .name{font-size:0.36rem;line-height:0.48rem;font-weight:bold;}
	.s_type2 .state{font-size:0.28rem;line-height:0.54rem;color:#137bfc;}
	.s_type2 .slider_box{position:absolute;top:49%;right:0.3rem;width:4.6rem;}
</style>